<template>
   <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="item in list" :key="item.proid" @click="gotodetail(item.proid)">
        <img :src="item.img1" alt="">
        <p>{{item.proname}}</p>
        <p class="price">￥{{item.originprice}}</p>
        </van-cell>
        </van-list>
    </van-pull-refresh>
</template>

<script setup lang="ts">
import{getproduct}from "../../api/home"
import{ref} from 'vue'
import {useRouter}from 'vue-router'
let router = useRouter()
const refreshing =ref(false)//下拉刷新状态 是否处于加载中状态	
const loading = ref(false);//列表加载  是否处于加载状态，加载过程中不触发 load 事件
const finished = ref(false);//列表加载 是否已加载完成，加载完成后不再触发 load 事件
const list:any=ref([])//商品数据列表
const count=ref(1)//定义初始页
// 定义参数类型
interface aa{
    count:number,
    limitNum:number
}
 const onLoad = () => {
         //定义参数
        const value:aa={
            count:count.value++,
            limitNum:10
        }
        // 调用接口
        getproduct(value).then((res:any)=>{
         if (refreshing.value) {
          list.value = [];
          refreshing.value = false;
        }
        //  console.log(count.value, res);
         if (res.code == 200) {
            list.value =list.value.concat(res.data)
            // 加载状态结束
            loading.value = false;
        }
        if (res.data.length ==0) {
          finished.value = true;
        }
        }) 
    };

    const onRefresh = () => {
      finished.value = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      loading.value = true;
      // 重置页数
      count.value = 1
      onLoad();
    };

    // 点击商品跳转详情页
  const  gotodetail=(id: string)=>{
      router.push({ path: '/detail', query: { id: id } })
  }
</script>
<style scoped lang="scss">
.van-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .van-cell {
        width: 50%;
        img {
            width: 90%;
        }
        p {
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .price {
            font-size: 18px;
            color: red;
            font-weight: bold;
        }
    }
}
:deep(.van-list__finished-text) {
    margin: 0 auto;
}
</style>